/*
 * @Author: DUST
 * @Date: 2023-05-19 15:52:55
 * @LastEditors: DUST
 * @LastEditTime: 2023-05-29 09:55:59
 * @FilePath: \vite-project\src\class\bgCanvas.ts
 * @Description: 
 * undefined
 */
interface dataItem {
  x: number;
  y: number;
  cX: number;
  cY: number;
}

class Starry{
  private canvas: any = null;
  private cxt: any = null;
  private cW: number = 0;
  private cH: number = 0;
  private num: number = 0;
  private data: Array<dataItem> = [];
  constructor(dom: string = "bgCanvas") {
    this.canvas = document.getElementById(dom);
    this.cxt = this.canvas.getContext("2d");
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.cW = this.canvas.width;
    this.cH = this.canvas.height;
    this.num = 200;
    this.data = [];
  }

  public init = () => {
    for (var i = 0; i < this.num; i++) {
      this.data[i] = {
        x: Math.random() * this.cW,
        y: Math.random() * this.cH,
        cX: Math.random() * 0.6 - 0.3,
        cY: Math.random() * 0.6 - 0.3,
      };
      this.drawCircle(this.data[i].x, this.data[i].y);
    }
  }
  public drawCircle = (x: number, y: number) => {
    var cxt = this.canvas.getContext("2d");
    cxt.save(); //保存路径
    cxt.fillStyle = "pink";
    cxt.beginPath(); //开始路径
    cxt.arc(x, y, 1, 0, Math.PI * 2, false);
    cxt.closePath(); //结束路径
    cxt.fill(); //填充方法
    cxt.restore(); //释放路径
  }

  public drawLine = (x1: number, y1: number, x2: number, y2: number) =>  {
    var cxt = this.cxt;
    var color = cxt.createLinearGradient(x1, y1, x2, y2);
    color.addColorStop(0, "yellow");
    color.addColorStop(1, "green");
    cxt.save();
    cxt.strokeStyle = color;
    cxt.beginPath(); //开始路径
    cxt.moveTo(x1, y1);
    cxt.lineTo(x2, y2);
    cxt.closePath(); //结束路径
    cxt.stroke(); //填充方法
    cxt.restore(); //释放路径
  }

  public moveCircle = () => {
    var self = this;
    self.cxt.clearRect(0, 0, self.cW, self.cH);
    for (var i = 0; i < self.num; i++) {
      self.data[i].x += self.data[i].cX;
      self.data[i].y += self.data[i].cY;
      if (self.data[i].x > self.cW || self.data[i].x < 0) {
        self.data[i].cX = -self.data[i].cX;
      }
      if (self.data[i].x > self.cH || self.data[i].y < 0) {
        self.data[i].cY = -self.data[i].cY;
      }
      this.drawCircle(self.data[i].x, self.data[i].y);
      for (var j = i + 1; j < self.num; j++) {
        if (
          Math.pow(self.data[i].x - self.data[j].x, 2) +
            Math.pow(self.data[i].y - self.data[j].y, 2) <=
          50 * 50
        ) {
          self.drawLine(
            self.data[i].x,
            self.data[i].y,
            self.data[j].x,
            self.data[j].y
          );
        }
      }
    }
  }

}

export default Starry;